<template>
	<view class="m30">
		<view class="mb20" v-for="(item,index) in listData" :key="index" @click="nologinJump('/subpage/travel/workDetail?id='+item.vlogId)">
			<view class="flex">
				<view class="avatar">
					<image :src="api_host + item.user.userAvatar" mode=""></image>
				</view>
				<view class="flex1 flex-jus ml20 right-info">
					<view class="flex1">
						<view class="bold c343 f28">{{item.user.userName}}</view>
						<view class="c999 f24 flex-jus mt10">
							<text>{{item.content}}</text>
							<!-- <text>{{item.createTime}}</text> -->
						</view>
					</view>
					<view class="work ml20">
						<image :src="api_host + item.userVlog.coverIcon" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getNoticelist} from '@/common/api_user.js'
	export default {
		name: 'msg',
		data() {
			return {
				listData:[],
				lastPage: false,
				page: 1,
				pageSize: 15
			}
		},
		onLoad() {
			this.getNoticelist()
		},
		onReachBottom() {
			if(!this.lastPage){
				this.page = this.page + 1
				this.getNoticelist()
			}
		},
		methods: {
			async getNoticelist() {
				const that = this
				const res = await getNoticelist({
					type:'1',
					pageNum: this.page,
					pageSize: this.pageSize
				})
				if(res.code == 200){
					this.listData = this.listData.concat(res.rows)
					this.lastPage = res.lastPage
				}
			}
		}
	}
</script>

<style lang="scss">
	.right-info{
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}
	.avatar{
		image{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50% 50% 50% 10rpx;
			border: 6rpx solid #fff;
		}
	}
	.work{
		image{
			width: 200rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
	}
</style>